import {
	AppstoreOutlined, PieChartOutlined, MailOutlined, CloudDownloadOutlined, SettingOutlined
} from '@ant-design/icons';
import { Layout, Menu, Image, Avatar, Button, Form, Row, Col } from 'antd';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import ShowUser from "./view/ShowUser";
import Update from './view/Update';
import AddAdmin from './view/AddAdmin';
import React from 'react';
import Role from './view/Role'
import Admin from './view/Admin';
import "./css/App.css"
import AddStu from './view/AddUser';
import Index from './view/Index';
import DBlist from './view/DBlist'
import a from './img/a.png'
import MyAxios from './service/myAxios'
import Error from './view/error'

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;




const pageList = []
const permission = []
let prole = false;
let paddstu = false;
let pusers = false;
let pdblist = false;
let pupdate = false;
let paddAdmin = false;
let pshowuser = false;
let padmin = false;

const map = new Map();


function traver(pageList) {

	if (pageList.length === 0) {
		return
	}
	for (let i = 0; i < pageList.length; i++) {
		if (pageList[i] === "/page/role") { prole = true; }
		if (pageList[i] === "/page/addstu") { paddstu = true;  }
		if (pageList[i] === "/page/users") { pusers = true;  }
		if (pageList[i] === "/page/dblist") { pdblist = true;  }
		if (pageList[i] === "/page/update") { pupdate = true;  }
		if (pageList[i] === "/page/addAdmin") { paddAdmin = true;  }
		if (pageList[i] === "/page/showuser") { pshowuser = true;  }
		if (pageList[i] === "/page/admin") { padmin = true;  }
	}





}

/**
 * 使用getMenu和getChild递归
 * @param {递归列表} data 
 * @returns 
 */

function getMenu(data) {

	if (data == null) {
		return;
	}
	const menuList = []
	for (let i = 0; i < data.length; i++) {
		menuList.push(getChild(data[i]));
	}

	return menuList;

}

function getChild(data) {
	if (data == null) {
		return;
	}
	pageList.push(data.url)
	permission.push(data.id)
	const menu = {
		label: <div><Link style={{ color: "#afafaf" }} to={data.url}> {data.menuName}</Link>  </div>,
		key: data.id,
		icon: data.icon === "3" ? <SettingOutlined /> : (data.icon === "1" ? <AppstoreOutlined /> : (data.icon === "2" ? <PieChartOutlined /> : null)),
		children: getMenu(data.childMenus),
		title:data.menuName
	}

	return menu;
}

class App2 extends React.Component {

	constructor(props) {
		super(props)
		this.state = {
			pupdate: false,
			collapsed: false,
			items: []
		};
		MyAxios.get(("menu/getMenu"))
			.then((data) => {
				if (data.code === 1001) {
					const menuList = getMenu(data.data)
					traver(pageList)
					this.setState({
						items: menuList
					})
					localStorage.setItem("permission",permission)
				}
			})

	}


	toggleCollapsed = () => {
		this.setState({
			collapsed: !this.state.collapsed,
		});
	};

	//退出登录
	exit = () => {
		localStorage.removeItem("isLogin")
		localStorage.removeItem("adminToken")
		window.location.reload()
	}



	render() {
		return (
			<Router>
				<Layout>
					<Header className="header">
						<Row>
							<Col span={2}>  <img src={a} style={{ width: 100 }}></img></Col>
							<Col span={4}>  <h1 className='welcome1'>后台管理系统</h1></Col>
							<Col span={14}></Col>
							<Col span={2}>               <h1 className='welcome1'>欢迎你：{this.props.isLogin}</h1></Col>
							<Col span={1}>     <Avatar className='welcome2' src={<Image src="http://localhost/a.jpeg" style={{ width: 60 }} />} /></Col>
							<Col span={1}>              <Button icon={<CloudDownloadOutlined />} className='exit' onClick={this.exit} >退出</Button></Col>
						</Row>
					</Header>

					<Layout >
						<Sider collapsed={this.state.collapsed} width={200} height={"100vh"} style={{ background: '#fff', height: "100%" }}>

							<Menu
								defaultSelectedKeys={['1']}
								defaultOpenKeys={['sub1']}
								mode="inline"
								theme="dark"
								className='menu-container'
								items={this.state.items}
								
							/>



						</Sider>
						<Layout style={{ padding: '0 24px 24px' }}>

							<Content
								style={{
									
									background: '#fff',
									padding: 24,
									margin: 0,
									minHeight: 280,
								}}
							>
								<Switch>

									<Route path="/page/role">
										{

											prole ? < Role  menuList={this.state.items}/> : <Error />

										}

									</Route>

									<Route path="/page/addstu">
										{

											paddstu ? <AddStu /> : <Error />

										}


									</Route>

									<Route path="/page/users">

										{

											pusers ? <Users /> : <Error />

										}


									</Route>

									<Route path="/page/dblist">
										<DBlist />
									</Route>

									<Route path="/page/update">
										{

											pupdate ? <Update /> : <Error />

										}
									</Route>

									<Route path="/page/addAdmin">

										{

											paddAdmin ? <AddAdmin /> : <Error />

										}
									</Route>

									<Route path="/page/showuser">
										{

											pshowuser ? <ShowUser /> : <Error />

										}

									</Route>

									<Route path="/page/admin">
										{

											padmin ? <Admin /> : <Error />

										}

									</Route>

									<Route path="/">
										<Index name={this.props.isLogin} />
									</Route>



								</Switch>


							</Content>
						</Layout>
					</Layout>
				</Layout>







			</Router>
		);
	}
}


function Users() {
	return <h2>Users</h2>;
}


export default App2